<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <label>
            Id:<input type="text" v-model='id'>
        </label>
        <label>
            Name: <input type="text" v-model='name'>
        </label>
        <input type="button" value="添加" @click='add'>

          <!-- 注意： v-for 循环的时候，key 属性只能使用 number 或者 string -->
        <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
        <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">{{item.id}}---{{item.name}}
        </p>

    </div>
    <script>
        var  vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                    {id:1,name:'123'},
                    {id:2,name:'456'},
                    {id:3,name:'789'}
                ]

            },
            methods:{
                add(){
                    this.list.unshift({id:this.id,name:this.name})
                }

            }
            
        })
    </script>
    
</body>
</html>